<template>
	<view>
		<view class="header" :style="'padding-top: '+bartop+'px; padding-bottom:10rpx;background:rgba(0,0,0,0)'">
			<view class="goodsmsgheader headertop" style="width: 100%; background: rgba(0,0,0,0);">
			      <navigator open-type="navigateBack" style="padding:10rpx">
			        <image src="/static/zjt2.png" mode="aspectFit"></image>
			      </navigator>
			      <text style="color: black;">社区资讯</text>
			  </view>
		</view>
		<view class="zxtitle">
			<view class="zxtitle1">
				<view :class="!active ? 'zxtitle1textpro':'zxtitle1text'" @click="changecate('')">全部</view>
				<view :class="active==item.name ? 'zxtitle1textpro':'zxtitle1text'" v-for="(item,index) in cate" @click="changecate(item.name)">{{item.title}}</view>
			</view>
			<view class="zxtitle2" @click="clearmsg()">
				<image class="zxtitle2img" src="https://x.bilinmeiju.com/static/xpc.png" mode=""></image>
				<view class="zxtitle2text">清除未读</view>
			</view>
		</view>
		<view class="search">
			<image class="search1" src="https://x.bilinmeiju.com/static/sous.png" mode=""></image>
			<view class="search2">
				搜索更多的
			</view>
		</view>
		<view class="box" v-for="(item,index) in list" @click="info(item.id)">
			<view style="width: 80rpx; height:80rpx; overflow: hidden; border-radius: 50%;">
				<image class="boximg" :src="item.thumb?item.thumb:'https://x.bilinmeiju.com/static/tc1.png'" mode="widthFix"></image>
			</view>
			<view class="box1">
				<view class="box1-1">
					<view class="box1-1Z">
						<view class="box1-1Z1">{{item.title}}</view>
						<image v-if="item.isnew==1" class="box1-1Z2" src="https://x.bilinmeiju.com/static/newlog.png" mode=""></image>
					</view>
					<view class="box1-1Y">
						{{item.ctime}}
					</view>
				</view>
				<view class="box1-2">
					{{item.desc}}
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	var that;
	export default {
		data() {
			return {
				top: '',
				CustomBar: '',
				cate:[],
				active:'',
				nextp:1,
				list:[],
				bartop:0
			}
		},
		onLoad() {
			that = this;
			this.bartop = this.$bartop;
			let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
			this.CustomBar = menuButtonInfo.bottom * 1 + 10
			this.top = menuButtonInfo.top * 1 + (menuButtonInfo.height / 2) - 5
			that.getcate()
		},
		onReachBottom() {
			that.getlist();
		},
		methods: {
			clearmsg(){
				uni.showToast({
					title:'清除成功',
					icon:'success'
				})
			},
			info(id) {
				uni.navigateTo({
					url: '/pages/news/info?id='+id
				})
			},
			changecate(type){
				this.active = type;
				this.nextp = 1;
				this.getlist();
			},
			getcate(){
				
				that.$post('api/getcate',{type:'news'}).then(res=>{
					that.cate = res.data.list;
				})
				that.getlist()
			},
			getlist(){
				if(!that.nextp) return false;
				uni.showLoading({
					title:'加载中...'
				})
				if(that.nextp){
					that.$post('api/getnews',{p:that.nextp,type:that.active}).then(res=>{
						uni.hideLoading();
						that.nextp = res.data.nextp;
						if(that.nextp>1){
							var list = res.data.news;
							if(list){
								for(var i=0; i<list.length; i++){
									that.list.push(list[i]);
								}
							}
						}else{
							that.list = res.data.news;
						}
					})
				}else{
					uni.showToast({
						title:'已无更多数据',
						icon:'none'
					})
				}
			}
		}
	}
</script>

<style>
	page{
		background: url('/static/hdbg.jpg');
		background-repeat: repeat-x;
	}
	.top {
		z-index: 2;
		width: 100%;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
	}

	.top1img {
		width: 40rpx;
		height: 72rpx;
	}

	.toptext {
		font-size: 36rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #000000;
		line-height: 20rpx;
	}

	.zxtitle {
		width: 90vw;
		margin: 20rpx auto;
		display: flex;
		justify-content: space-between;
		padding-top: 160rpx;
	}

	.zxtitle1 {
		display: flex;

	}

	.zxtitle1text {
		font-size: 20rpx;
		margin: 0 20rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		color: #999999;
		line-height: 20px;
	}

	.zxtitle1textpro {
		font-size: 30rpx;
		margin: 0 20rpx;
		border-bottom: #FE7B00 solid 2px;
		font-family: Alibaba PuHuiTi;
		font-weight: 500;
		color: #FE7B00;
		line-height: 20px;
	}

	.zxtitle2 {
		display: flex;
		align-items: center;
	}

	.zxtitle2text {
		margin-left: 10rpx;
		font-size: 24rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		color: #333333;
		line-height: 20rpx;
	}

	.zxtitle2img {
		width: 26rpx;
		height: 23rpx;
	}

	.search {
		width: 90vw;
		height: 70rpx;
		margin: 0 auto;
		background-color: #ffffff;
		border-radius: 20px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.search1 {
		width: 32rpx;
		height: 30rpx;
	}

	.search2 {
		margin-left: 20rpx;
		font-size: 26rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		color: #F4652F;
		line-height: 20px;
	}

	.box {
		width: 90vw;
		margin: 0rpx auto;
		margin-top: 20rpx;
		padding: 20rpx 0;
		display: flex;
		justify-content: space-between;
		border-bottom: 1px solid #eceaea;
	}

	.boximg {
		width: 100%;
		
	}

	.box1 {
		width: 564rpx;
	}

	.box1-1 {
		display: flex;
		justify-content: space-between;
	}

	.box1-1Z {
		display: flex;
		align-items: center;
	}

	.box1-1Z1 {
		font-size: 28rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 700;
		color: #333333;
		line-height: 42rpx;
	}

	.box1-1Z2 {
		margin-left: 20rpx;
		width: 26rpx;
		height: 20rpx;
	}

	.box1-2 {
		font-size: 24rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		color: #999999;
		line-height: 42rpx;
	}

	.box1-1Y {
		font-size: 24rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		color: #999999;
		line-height: 42rpx;
	}

	.xian {
		width: 90vw;
		margin: 0 auto;
		height: 2px;
	}
</style>
